<template>
    <el-container>
        <el-header>
            <div><img src="../../pictures/logo.png" width="68px" height="60px"> <span>科记：记录精彩校园生活</span></div>
            <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#99ecff"
            text-color="black"
            active-text-color="#f59456">
                <el-menu-item class="grid-content" index="1">
                    <el-link href="#/home" target="_self" underline="false">科记主页</el-link>
                </el-menu-item>
                <el-submenu class="grid-content" index="3">
                    <template slot="title">生活助手</template>
                    <el-menu-item index="3-1">
                        <router-link :to="{ name: 'blog', params: { id: 1 } }">校园博客</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <router-link :to="{ name: 'blog', params: { id: 2 } }">生活分享</router-link>
                    </el-menu-item>
                    <el-menu-item index="3-3"><a href="#/question" target="_self">校园问答</a></el-menu-item>
                </el-submenu>
                <el-submenu class="grid-content" index="4">
                    <template slot="title">班级事务</template>
                    <el-menu-item index="4-1">
                        <router-link :to="{ name: 'notice'}">班级通知</router-link>
                    </el-menu-item>
                    <el-menu-item index="4-2"><a href="#/account" target="_self">班级账目</a></el-menu-item>
                </el-submenu>
                <el-menu-item class="grid-content" index="5">
                    <el-link href="#/information" target="_self" underline="false">个人信息</el-link>
                </el-menu-item>
                <el-menu-item class="grid-content">
                    <div display: center>
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="校园博客" value="1"></el-option>
                            <el-option label="生活助手" value="2"></el-option>
                            <el-option label="校园问答" value="3"></el-option>
                            <el-option label="班级通知" value="4"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu-item>
                <el-menu-item>
                    <div><el-col :span="12">
                            <div class="demo-basic--circle">
                                <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
                            </div>
                        </el-col> 
                    </div>
                </el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>

        <el-main>
            <div class="container" id="body">
                <div class="profile-card">
                    <div class="avatar">
                        <img :src="user.imageUrl" alt="头像">
                    </div>
                    <el-form ref="form" :model="user" label-width="80px">
                        <el-form-item label="用户名">
                          <el-input v-model="user.name" :disabled="!isEditing"></el-input>
                        </el-form-item>
                        <el-form-item label="年级">
                          <el-select v-model="user.grade" :disabled="!isEditing">
                            <el-option label="2021级" value="21级"></el-option>
                            <el-option label="2022级" value="22级"></el-option>
                            <el-option label="2023级" value="23级"></el-option>
                            <el-option label="2024级" value="24级"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="班级">
                            <el-select v-model="user.class" :disabled="!isEditing">
                                <el-option label="一班" value="1班"></el-option>
                                <el-option label="二班" value="2班"></el-option>
                                <el-option label="三班" value="3班"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-select v-model="user.role" :disabled="!isrole">
                                <el-option label="学生" value="学生"></el-option>
                                <el-option label="班长" value="班长"></el-option>
                                <el-option label="团支书" value="团支书"></el-option>
                                <el-option label="学习委员" value="学习委员"></el-option>
                                <el-option label="生活委员" value="生活委员"></el-option>
                                <el-option label="文艺委员" value="文艺委员"></el-option>
                                <el-option label="体育委员" value="体育委员"></el-option>
                                <el-option label="心理委员" value="心理委员"></el-option>
                                <el-option label="宣传委员" value="宣传委员"></el-option>
                                <el-option label="组织委员" value="组织委员"></el-option>
                                <el-option label="劳动委员" value="劳动委员"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专业">
                            <el-select v-model="user.major" :disabled="!isEditing">
                              <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
                              <el-option label="软件工程" value="软件工程"></el-option>
                              <el-option label="网络工程" value="网络工程"></el-option>
                              <el-option label="信息安全" value="信息安全"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生日">
                          <el-col :span="20">
                            <el-date-picker type="date" :disabled="!isEditing" v-model="user.birthday" style="width: 100%;"></el-date-picker>
                          </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="!isEditing" type="primary" @click="startEditing">修改</el-button>
                            <el-button v-if="isEditing" type="primary" @click="submitChanges">提交更改</el-button>
                            <el-button v-if="isEditing" @click="cancelEditing">取消</el-button>
                        </el-form-item>
                      </el-form>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>

import { getUsersinfo } from '@/api/info.js'
import { updateUserInfo } from '@/api/info.js'

    export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',//与字体颜色有关的值
        input: '',//搜索栏的输入
        select: '',//搜索栏的选择
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",//头像的访问路径
        dialogImageUrl: '',
        dialogVisible: false,
        selectedFile: '',
        isEditing: false,  // 控制编辑状态
        isrole: false,
        originalUser: {},  // 保存用户原始信息
        user: {
                name: '',
                grade: '',
                class: '',
                role: '',
                birthday: '',
                major: '',
                imageUrl: '' // 可以用来存储用户头像URL
            }
        };
    },
    
    methods: {
        fetchUserInfo() {
            getUsersinfo().then(response => {
                if(response.data.code === 0) {
                    alert('获取用户信息失败，请重新登录');
                    window.location.href = '#/login';
                    return false;
                } else { // 更新用户信息
                    const data = response.data.data;
                    this.user.name = data.name;
                    this.user.grade = data.grade;
                    this.user.class = data.className;
                    this.user.role = data.classRole;
                    this.user.major = data.major;
                    this.user.birthday = data.birthday;
                    this.user.imageUrl = data.imageUrl;
                    this.originalUser = { ...this.user }; // 保存原始数据 
                    if (this.originalUser.imageUrl) {
                        this.squareUrl = this.originalUser.imageUrl;
                    }
                } 
            });
        },

        startEditing() {
            this.isEditing = true; // 允许编辑
        },

        submitChanges() {
            // 创建一个对象来保存需要更新的字段
            const updates = {};
            Object.keys(this.user).forEach(key => {
                if (this.user[key] !== this.originalUser[key]) {
                    updates[key] = this.user[key];
                } else {
                    updates[key] = this.originalUser[key];
                }
            });

            // 发送更新请求到后端
            updateUserInfo(updates).then(response => {
                if (response.data.code === 1) {
                    // 更新成功后，提供反馈或做其他操作
                    alert('用户信息更新成功！');
                    this.originalUser = { ...this.user }; // 更新成功，保存最新的原始数据
                    this.isEditing = false; // 停止编辑
                } else {
                    alert('更新失败: ' + response.data.message);
                }
            }).catch(error => {
                console.error('更新用户信息时出错:', error);
            });
        },

        cancelEditing() {
            this.user = { ...this.originalUser }; // 恢复原始数据
            this.isEditing = false; // 停止编辑
        }
    },

    created() {
        this.fetchUserInfo(); // 在组件挂载时获取用户信息
    }
  }
  
</script>

<style>
    .el-header{
        background: #99ecff;
        display: flex;
        padding-left: 0;
        justify-content: space-between;
        color: black;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    #body {
        height: 100%;
        margin-left: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f4;
    }
    .container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
    }

    .profile-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        padding: 20px;
        gap: 20px;
    }

    .avatar img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }

    .info {
        flex: 1;
    }

    .info h1 {
        margin: 0;
        font-size: 24px;
    }

    .info p {
        margin: 5px 0;
    }

    button {
        margin-top: 20px;
        padding: 10px 15px;
        font-size: 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    .upload {
        display: flex;
        align-items: center;
        margin-left: 500px;
    }
</style>